<template>
	<scroll-view scroll-y class="page" @scroll="handleScroll">
		<view class="fixed" :style="{'opacity': opacity}">
			<cu-custom :bgColor="personalTitleBg" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">榜单歌曲</block>
			</cu-custom>
		</view>
		<image :src="topimg" style="height: 30vh;" mode="aspectFill" class="response"></image>
		<view class="music-list">
			<view v-for="(m,i) in musicData" class="music-view">
				<view class="music-left">
					<text>{{ m.name }} - {{ m.singer }}</text>
					<view class="music-bottom">[{{ m.interval }}] {{ m.albumName==''?'未知專輯':m.albumName }}</view>
				</view>
				<view class="music-play" @click="playMusic(m)">
					<text @click="playMusic(m,1)"></text>
					<text @click="playMusic(m,2)"></text>
				</view>
			</view>
		</view>
	</scroll-view>
</template>
<script>
	export default {
		data() {
			return {
				statusHeight: this.StatusBar,
				opacity: 0,
				bangid: '19723756',
				source: 'wy',
				topimg: '',
				topImgs: [
					'http://p1.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=150y150',
					'http://p2.music.126.net/GhhuF6Ep5Tq9IEvLsyCN7w==/18708190348409091.jpg?param=150y150',
					'http://p2.music.126.net/aXUPgImt8hhf4cMUZEjP4g==/109951165611417794.jpg?param=150y150',
					'http://p2.music.126.net/fhAqiflLy3eU-ldmBQByrg==/109951165613082765.jpg?param=150y150'
				],
				musicAll: [],
				musicData: [],
				detailOne: {
					name: '',
					src: ''
				},
				personalTitleBg: 'bg-tran',
				musicTotal: 10,
				loading: false
			};
		},
		onLoad(options) {
			this.topimg = this.topImgs[options.idx]
			this.bangid = options.id
			this.source = options.sou
		},
		onShow() {
			this.getTopDetail()
			// uni.getSavedFileList({
			//   success: function (res) {
			//     console.log(res);
			//   }
			// });
		},
		methods: {
			getTopDetail() {
				let self = this
				this.musicTotal = 10
				this.musicData.splice(0, this.musicData.length)
				this.$http.get('/music/mc/leader/board', {
						source: this.source,
						bangid: this.bangid,
						page: 1
					}, {tk: 'e920e52fad7edc74287d6fd7f5e56546'}, {})
					.then(res => {
						if (res.total > 0) {
							self.musicData = res.list
							// self.detailOne.name = res.playlist.name
							// self.detailOne.src = res.playlist.coverImgUrl
							// self.musicAll = res.playlist.tracks
							// for (let i = 0; i < this.musicTotal; i++) {
							// 	self.musicData.push(self.musicAll[i])
							// }
						} else {
							uni.showToast({
								title: '啊哦，数据找不到了',
								icon: 'none'
							});
						}
					})
			},
			// 沉浸式变色
			handleScroll(e) {
				if (e.detail.scrollTop > this.statusHeight + 120) {
					this.opacity = 1
					this.personalTitleBg = 'bg-gray'
				} else {
					this.opacity = e.detail.scrollTop / this.statusHeight
					this.personalTitleBg = 'bg-tran'
				}
			},
			formatTime(time) {
				let min = parseInt(time / (1000 * 60))
				let second = parseInt(time % (1000 * 60) / 1000)
				// if (min.length < 2) {
				// 	min = 0 + min;
				// }
				if (second.length < 2) {
					second = 0 + second + '';
				}
				return min + ":" + second
			},
			getMoreMusic() {
				for (let i = this.musicTotal; i < this.musicTotal+10; i++) {
					this.musicData.push(this.musicAll[i])
				}	
				this.musicTotal += 10
			},
			playMusic(songinfo,type) {
				let id = songinfo.songmid
				let ss = songinfo.types[0].type || '128k'
				let self = this
				uni.showLoading({
					title: '加载音乐...',
					mask: true
				})
				this.$http.get('/music/mc/song/url', {songmid: id, source: this.source, songsize: ss}, {tk: 'e920e52fad7edc74287d6fd7f5e56546'}, {})
					.then(musicUrlRes => {
						if (type == 1) {
							const bgAudioMannager = uni.getBackgroundAudioManager()
							bgAudioMannager.title = songinfo.name
							bgAudioMannager.singer = songinfo.singer
							bgAudioMannager.coverImgUrl = songinfo.img
							bgAudioMannager.src = musicUrlRes.url
							uni.hideLoading()
							let historyList = uni.getStorageSync('historyList') || []
							let f = self.isArr(historyList, songinfo.songmid)
							console.log(111, f)
							if (!f) {
								historyList.push(songinfo)
								uni.setStorageSync('historyList', historyList)
							}
						} else if (type == 2) {
							let url = musicUrlRes.url
							
							// 复制自行下载
							uni.setClipboardData({
								data: url,
								success: function(res) {
									uni.getClipboardData({
										success: function(res) {
											uni.showToast({
												icon: 'none',
												title: '复制音乐链接成功，请前往浏览器粘贴后自行下载',
												duration: 3000
											});
										}
									});
								}
							});
							
							uni.hideLoading()
							
							// 浏览器WebView下载
							// let title = '音乐链接'
							// this.togo('/pagesME/settings/settingWebview', {url: url, title: title})
							
							// 下载TEMP部分
							// const downloadTask = uni.downloadFile({
							// 	url: musicUrlRes.url,
							// 	success: (tempFileRes) => {
							// 		if (tempFileRes.statusCode === 200) {
							// 			console.log('下载成功');
							// 			uni.hideLoading()
							// 			uni.saveFile({
							// 				tempFilePath: tempFileRes.tempFilePath,
							// 				success: function (saveFileRes) {
							// 					console.log(saveFileRes)
							// 					let savedFilePath = saveFileRes.savedFilePath
							// 					let saveList = uni.getStorageSync('saveList') || []
							// 					let saveOne = {
							// 						path: savedFilePath,
							// 						info: songinfo
							// 					}
							// 					saveList.push(saveOne)
							// 					uni.setStorageSync('saveList', saveList)
							// 				}
							// 			});
							// 		}
							// 	}
							// });
							// downloadTask.onProgressUpdate((res) => {
							//     console.log('下载进度' + res.progress);
							//     // console.log('已经下载的数据长度' + res.totalBytesWritten);
							//     // console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);						
							//     // 测试条件，取消下载任务。
							//     // if (res.progress > 50) {
							//     //     downloadTask.abort();
							//     // }
							// });
						}
					}).catch(e => {
						uni.hideLoading()
						uni.showToast({
							title: e.data.msg,
							icon: 'none',
							duration: 2000
						});
					})
			},
			isArr(arr,value) {
			 for(var i=0;i<arr.length;i++){
				 if(value===arr[i].songmid){
				 return true
				 }
			 }
			 return false
		 }
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		overflow: hidden;

		.fixed {
			position: fixed;
			z-index: 99;
		}

		.music-list {
			.music-view {
				display: flex;
				flex-direction: row;
				margin: 60rpx;
				.music-left {
					font-size: 28rpx;
					flex: 8;
					text {
						font-weight: bold;
					}
					.music-bottom {
						
					}
				}
				.music-play {
					flex: 2;
					padding-top: 20rpx;
					text {
						display: inline-block;
						width: 40rpx;
						height: 40rpx;
						background-size: 100% 100%;
						&:nth-child(1) {
							background-image: url(../../static/imgs/icons/m-play.png);
						}
						&:nth-child(2) {
							margin-left: 30rpx;
							background-image: url(../../static/imgs/icons/m-download.png);
						}
					}
				}
			}
		}
	}
	
</style>
